<template>
    <div class="user-manager app-container">
        <el-form ref="form" :model="listQuery" label-width="120px">
            <div>
                <el-form-item label="姓名">
                    <el-input @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.mobile"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.idCard"></el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item label="注册开始时间">
                    <el-date-picker @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.createStart"></el-date-picker>
                </el-form-item>
                <el-form-item label="注册结束时间">
                    <el-date-picker @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.createEnd"></el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width:100%">
            <el-table-column align="center" label="姓名" min-width="90">
                <template slot-scope="scope">
                    <span>张三三{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="手机号" min-width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.mobile}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="身份证号" min-width="180">
                <template slot-scope="scope">
                    <span>{{scope.row.idCard}}</span>
                </template>
            </el-table-column>
            <el-table-column min-width="150px" align="center" label="注册时间">
                <template slot-scope="scope">
                    <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="注册客户端" min-width="110">
                <template slot-scope="scope">
                    <span>{{scope.row.idCard}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="渠道" min-width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.idCard}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="会员状态" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.idCard}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="借款次数" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.idCard}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.idCard}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('table.actions')" min-width="120" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" plain @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
                    <el-button type="danger" size="mini" plain>{{$t('table.delete')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
                <el-form-item :label="$t('table.type')" prop="type">
                    <el-input v-model="temp.title"></el-input>
                </el-form-item>
                <el-form-item :label="$t('table.date')" prop="timestamp">
                    <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('table.title')" prop="title">
                    <el-input v-model="temp.title"></el-input>
                    </el-form-item>
                <el-form-item :label="$t('table.status')">
                    <el-input v-model="temp.title"></el-input>
                </el-form-item>
                <el-form-item :label="$t('table.importance')">
                    <el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
                </el-form-item>
                <el-form-item :label="$t('table.remark')">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="temp.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
                <el-button type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { fetchList, updateArticle } from "@/api/article";
    import waves from "@/directive/waves"; // 水波纹指令

    export default {
        name: "userManager",
        directives: {
            waves
        },
        data() {
            return {
                tableKey: 0,
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 10,
                    mobile: undefined,
                    name: undefined,
                    idCard: undefined,
                    createEnd: '',
                    createStart: ''
                },
                temp: {
                    id: undefined,
                    importance: 1,
                    remark: '',
                    timestamp: new Date(),
                    title: '',
                    type: '',
                    status: 'published'
                },
                dialogFormVisible: false,
                dialogStatus: '',
                textMap: {
                    update: '编辑',
                    create: '新建'
                },
                rules: {
                    type: [{ required: true, message: 'type is required', trigger: 'change' }],
                    timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
                    title: [{ required: true, message: 'title is required', trigger: 'blur' }]
                }
            };
        },
        created() {
            this.getList()
        },
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'info',
                    deleted: 'danger'
                }
                return statusMap[status]
            }
        },
        methods: {
            getList() {
                this.listLoading = true;
                fetchList(this.listQuery).then(response => {
                    this.list = response.data.items;
                    this.total = response.data.total;
                    this.listLoading = false;
                });
            },
            handleFilter() {
                this.listQuery.page = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            handleUpdate(row) {
                this.temp = Object.assign({}, row) // copy obj
                this.temp.timestamp = new Date(this.temp.timestamp)
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            updateData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        const tempData = Object.assign({}, this.temp)
                        tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
                        updateArticle(tempData).then(() => {
                            for (const v of this.list) {
                                if (v.id === this.temp.id) {
                                    const index = this.list.indexOf(v)
                                    this.list.splice(index, 1, this.temp)
                                    break
                                }
                            }
                            this.dialogFormVisible = false
                            this.$notify({
                                title: '成功',
                                message: '更新成功',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            }
        }
    };
</script>